<template>
  <div class="chart-container">
    <div ref="pieChart" class="chart pie-chart"></div>
    <div ref="lineChart" class="chart line-chart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const lineChart = ref(null);
const pieChart = ref(null);

const lineChartOptions = {
  title: {
    text: '成绩分析统计分为ABCDE五个等级的学生',
    left: 'center',
    textStyle: {
      color: '#333',
    },
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [{
    data: [],
    type: 'line',
    smooth: true,
    itemStyle: {
      color: '#5470C6',
    },
    lineStyle: {
      color: '#5470C6',
    },
  }],
};

const pieChartOptions = {
  title: {
    text: '各等级学生占比',
    left: 'center',
    textStyle: {
      color: '#333',
    },
  },
  tooltip: {
    trigger: 'item',
  },
  series: [{
    type: 'pie',
    radius: '50%',
    data: [],
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2,
    },
    label: {
      show: true,
      formatter: '{b}: {d}%',
    },
  }],
};

const updateChart = () => {
  const newData = {
    categories: ['A', 'B', 'C', 'D', 'E'],
    data: [95, 82, 75, 63, 52, 37],
  };

  lineChart.value.setOption({
    xAxis: {
      data: newData.categories,
    },
    series: [{
      data: newData.data,
    }],
  });

  const pieData = newData.categories.map((category, index) => ({
    name: category,
    value: newData.data[index],
  }));
  pieChart.value.setOption({
    series: [{
      data: pieData,
    }],
  });
};

onMounted(() => {
  lineChart.value = echarts.init(lineChart.value);
  lineChart.value.setOption(lineChartOptions);

  pieChart.value = echarts.init(pieChart.value);
  pieChart.value.setOption(pieChartOptions);

  updateChart();
});
</script>

<style>
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart {
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: 20px 0;
  background: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.pie-chart {
  background: #fcf5e9;
}

.line-chart {
  background: #e9f5fc;
}
</style>
